<template>
  <div class="hotTheme">
    <h2>热门主题</h2>
    <van-grid :column-num="2">
      <van-grid-item v-for="item in list" :key="item.id">
        <img :src="item.url" />
        <p>{{ item.title }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          url: "https://img1.baidu.com/it/u=3371430131,1369596885&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
          title: "你好，十二月",
          id: 1,
        },
        {
          url: "https://img0.baidu.com/it/u=3565200853,3390011300&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=435",
          title: "一起走向未来",
          id: 2,
        },
        {
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.book118.com%2Fsr1%2FM00%2F24%2F0C%2FwKh2Al_VztuIDp4sAAGhdsv09WgAAnzggG92A0AAaGO795.jpg&refer=http%3A%2F%2Fimg.book118.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672063305&t=cf3c8211e20886f51bbcf1443693a722",
          title: "决战世界杯",
          id: 3,
        },
        {
          url: "https://img2.baidu.com/it/u=3091736662,656415795&fm=253&fmt=auto&app=138&f=JPEG?w=923&h=500",
          title: "共同复苏、强劲复苏",
          id: 4,
        },
      ],
    };
  },
  methods: {
    getHotThemeData() {},
  },
};
</script>

<style lang="scss" scoped>
.hotTheme {
  padding-left: 10px;
  padding-right: 10px;
  background: #fff;
  h2 {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333;
  }
  .van-grid {
    .van-grid-item {
      .van-grid-item__content {
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
